<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Example</title>
  <!-- 引入 Bootstrap 样式表 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">My Website</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1>Welcome to My Website</h1>
      <p>This is a Bootstrap example.</p>
      <button class="btn btn-primary">Learn More</button>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2>About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor ante vel porta varius. In hac habitasse platea dictumst. Maecenas feugiat mauris id nibh feugiat, ut mollis lectus bibendum. Sed aliquet magna nec diam dictum, eu lobortis enim volutpat.</p>
      </div>
      <div class="col-md-6">
        <img src="https://via.placeholder.com/400x300" alt="Placeholder Image" class="img-fluid">
      </div>
    </div>

    <div class="row">
      <div class="col-md-4">
        <h3>Service 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor ante vel porta varius. In hac habitasse platea dictumst. Maecenas feugiat mauris id nibh feugiat, ut mollis lectus bibendum.</p>
      </div>
      <div class="col-md-4">
        <h3>Service 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor ante vel porta varius. In hac habitasse platea dictumst. Maecenas feugiat mauris id nibh feugiat, ut mollis续上一个代码块：

        lectus bibendum.</p>
      </div>
      <div class="col-md-4">
        <h3>Service 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor ante vel porta varius. In hac habitasse platea dictumst. Maecenas feugiat mauris id nibh feugiat, ut mollis lectus bibendum.</p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <h2>Contact Us</h2>
        <form>
          <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" class="form-control" id="name">
          </div>
          <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email">
          </div>
          <div class="form-group">
            <label for="message">Message:</label>
            <textarea class="form-control" id="message" rows="5"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>

  </div>

  <!-- 引入 Bootstrap JavaScript 插件，必须放在 body 标签最后 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
